<template>
	<view class="container" v-if="dataList.status==101">
		<view class="u-flex u-flex-items-center u-flex-center payment_status">
			<uni-icons size="40" color="#04C160" custom-prefix="iconfont" type="icon-zhifuchenggong"></uni-icons>
			<text class='status Medium'>支付成功</text>
		</view>
		<view class="payment_money u-flex u-flex-items-start u-flex-center">
			<view class="symbol Medium">¥</view>
			<view class="rmb Medium">{{dataList.orderMoney}}</view>
		</view>
		<!-- 付款完成 -->
		<view class="payment_list collection_complete">
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view>订单状态</view>
				<view class="list_text">支付成功</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view>支付时间</view>
				<view class="list_text">{{dataList.paymentTime}}</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view>收款方式</view>
				<view class="list_text">{{dataList.paymentMethod==100?'聚合订单码':'银行转账支付'}}</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view>订单编号</view>
				<view class="list_text">{{dataList.orderNo}}</view>
			</view>
			<view class="list u-flex u-flex-items-start u-flex-start">
				<view>渠道单号</view>
				<view class="list_text">{{dataList.channelReceiptNo}}</view>
			</view>
		</view>
		<view class="details_btn">
			<u-button text="返回" :hairline="false" color="#EAF0FF" :customStyle="{width:'334rpx',height:'88rpx',fontSize:'32rpx',borderRadius:'8rpx',color:'#4179FF'}" @click="toDetails"></u-button>
		</view>
		<u-gap height="40"></u-gap>
	</view>
</template>

<script>
	import {
		getOrderDetail
	} from '@/config/api.js';
	export default {
		data() {
			return {
				orderNo: '', //订单id
				dataList: {
					activityId: 0,
					actualRefundAmount: "",
					channelReceiptNo: "",
					channelRefundOrderNo: "",
					channelType: 0,
					createTime: "",
					customerInviteId: 0,
					customerName: "",
					fundProcessType: 0,
					merchantName: "",
					merchantNo: "",
					merchantServiceCharge: 0,
					orderDeadline: 0,
					orderMoney: 0,
					orderNo: "",
					orderORcode: "",
					orderTime: "",
					payee: "",
					paymentMethod: 0,
					paymentTime: "",
					refundMerchantServiceCharge: 0,
					refundOrderNo: "",
					refundTime: "",
					status: 0,
					storeName: "",
					type: 0
				}
			};
		},
		onLoad(options) {
			var that = this;
			let orderNo = options.orderNo;
			if (uni.$u.test.isEmpty(orderNo)) {
				return uni.showModal({
					title: '提示',
					content: '订单信息错误',
					showCancel: false,
					confirmText: '返回',
					success: function(res) {
						if (res.confirm) {
							uni.$u.route({
								type: 'navigateBack'
							});
						}
					}
				});
			}
			that.orderNo = orderNo;
			that.getData();
		},
		methods: {
			// 获取数据
			getData() {
				let that = this;
				let params = {
					token: that.vuex_token,
					orderNo: that.orderNo
				};
				getOrderDetail(params).then(res => {
					that.dataList = res.data;
				}).catch(err => {
					console.log('getOrderDetail=', err);
				});
			},
			// 支付成功返回
			toDetails() {
				let that = this;
				uni.$u.route({
					type: 'navigateBack'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;

		.container {
			position: relative;
			height: 100vh;
			padding-top: 1rpx;
			box-sizing: border-box;

			.payment_status {
				margin: 40rpx auto 0;

				.status {

					font-size: 28rpx;
					line-height: 32rpx;
					color: #00C25F;
					margin-left: 6rpx;
				}

				.status_refund {
					color: #F26809;
				}
			}

			.payment_money {
				margin: 32rpx auto 0;
				text-align: center;

				.symbol {

					font-size: 52rpx;
					line-height: 66rpx;
					color: #333333;
				}

				.rmb {

					font-size: 68rpx;
					color: #333333;
					line-height: 72rpx;
					margin-left: 13rpx;
				}
			}

			.payment_list {
				margin: 112rpx 40rpx 0;
				border-bottom: 1rpx solid #DDDDDD;

				.list {
					margin-bottom: 36rpx;

					view {
						
						font-size: 28rpx;
						color: #888888;
						line-height: 32rpx;
						word-break: keep-all;
					}

					.list_text {
						color: #333333;
						margin-left: 40rpx;
						word-break: break-all;
					}
				}
			}

			.collection_complete {
				border-bottom: none;
			}

			.details_btn {
				height: 88rpx;
				margin-top: 60rpx;
			}

			.save_album {
				
				font-size: 28rpx;
				color: #888888;
				line-height: 32rpx;
				position: absolute;
				bottom: 148rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>